/*
 * @Description: 退出登录组件
 * @Author: ziwei.ma
 * @Date: 2019-10-24 22:42:20
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 17:37:44
 */
<template>
  <div class="logout_wrapper flex-h flex-vc">
    <div class="HeadPortraits_wrapper">
      <img :src="headPortrait">
    </div>
    <div class="logout_btn_wrapper flex-v">
      <div class="userName fontsize32 flex1">{{name}}</div>
      <div
        class="logout_btn fontsize28"
        @click="getLogout"
      >退出登录</div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from 'vue-xiaobu-utils'
export default {
  components: {

  },
  data() {
    return {
      headPortrait: require('../../assets/default_head_portrait.png'),
      name: ''
    }
  },
  mounted() {
    this.getUserDetails()
  },
  methods: {
    getUserDetails() {
      let headIcon = getUserInfo().ICON
      let isLogin = getUserInfo().IS_LOGIN
      if (isLogin === 1) {
        this.name = getUserInfo().NICK_NAME
        if (headIcon !== '') {
          this.headPortrait = getUserInfo().ICON
        }
      } else {
        this.name = '请登录'
      }
    },
    getLogout() {
      this.$parent.showLogout()
    }
  }
}
</script>

<style scoped>
.logout_wrapper {
  width: 686px;
  height: 200px;
  border-radius: 16px;
  background: url('../../assets/logout.png') no-repeat;
  background-size: cover;
  margin: 32px;
  padding-left: 32px;
  box-sizing: border-box;
}
.HeadPortraits_wrapper {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-right: 32px;
  border-radius: 50%;
}
.HeadPortraits_wrapper > img {
  width: 100%;
  height: 100%;
}
.userName {
  color: #ffffff;
  margin-bottom: 16px;
}
.logout_btn {
  width: 136px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  background: #6fb1ff;
  border-radius: 22px;
}
</style>
